<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			.box {
				width: 1000px;
				margin: 0 auto;
				margin-top: 10px;
				overflow: hidden;
				border: 1px solid #1678be;
				border-top-left-radius: 7px;
				border-top-right-radius: 7px;
				font-size: 13px;
			}

			.inf {
				width: 100%;
				height: 30px;
				background-color: #1678be;
				box-sizing: border-box;
				line-height: 30px;
				text-indent: 1.5em;
			}

			input {
				outline: none;
			}

			.acc {
				margin-left: 200px;
				margin-top: 20px;
				line-height: 35px;
			}

			.wh {
				width: 200px;
				height: 30px;
			}

			.qr {
				color: red;
			}

			.err {
				color: red;
				margin-left: 25px;
				display: none;
			}

			.jlt {
				display: inline-block;
				width: 16px;
				height: 16px;
				background: url(../images/icon.png);
				background-repeat: no-repeat;
				background-size: auto;
				background-position: 0px -350px;
				margin-left: 50px;
				vertical-align: middle;
				margin-right: 10px;
			}

			.acc input {
				display: inline-block;
				box-sizing: border-box;
			}

			.use input {
				margin-left: 13px;
			}

			.ml {
				margin-left: 26px;
			}

			.rad {
				margin-left: 75px;
			}

			.ts {
				color: #FF7F00;
			}

			.ts2 {
				text-decoration: underline;
			}

			.but {
				display: block;
				margin-left: 120px;
				width: 100px;
				height: 30px;
				background-color: #FF7F00;
				border: none;
				cursor: pointer;
				outline: none;
			}

			a {
				color: #07f;
			}
		</style>
	</head>
	<body>

		<div class="box">

			<div class="inf">帐户信息</div>

			<form action="../html/09.渐变轮播图模板.html" class="acc">

				<div class="use">
					<span class="qr">*</span>
					<span>用户名：</span>
					<input type="text" id="usename" class="wh" placeholder="请输入您的用户名">

					<span class="ts">6-30位字母、数字或"_"，字母开头</span>
				</div>

				<div class="err">

					<span class="jlt"></span>
					<span>用户名长度不够</span>
				</div>

				<div>
					<span class="qr">*</span>
					<span>登陆密码：</span>
					<input type="password" id="paw" class="wh" placeholder="请输入您的密码">
				</div>

				<div class="err">
					<span class="jlt"></span>
					<span>登陆密码长度不能少于6个字符</span>
				</div>

				<div>
					<span class="qr">*</span>
					<span>确认密码：</span>
					<input type="password" class="wh" id="paws" placeholder="再次输入您的密码">
				</div>

				<div class="err">
					<span class="jlt"></span>
					<span>两次密码不一致</span>
				</div>

				<div>
					<span class="qr">*</span>
					<span>证件类型：</span>
					<select id="cn" class="wh">
						<option>中国居民身份证</option>
						<option>外国人永久身份证</option>
						<option>港澳台居民身份证</option>
					</select>
				</div>

				<div class="ml">
					<span class="qr">*</span>
					<span>姓名：</span>
					<input type="text" class="wh" id="nam" placeholder="请输入证件上的中文姓名">
					<span class="ts"><span class="ts2">姓名填写规则</span>（用于身份证核验，请正确填写）</span>
				</div>

				<div class="err">
					<span class="jlt"></span>
					<span>用户名不能为空</span>
				</div>

				<div>
					<span class="qr">*</span>
					<span>证件号码：</span>
					<input type="text" class="wh" id="sfz" placeholder="请输入您的证件号码">
					<span class="ts">（用于身份证核验，请正确填写）</span>
				</div>

				<div class="err">
					<span class="jlt"></span>
					<span>您输入的证件号码不正确</span>
				</div>

				<div>
					<span class="qr">*</span>
					<span>优惠类型：</span>
					<select id="" class="wh">
						<option>成人</option>
						<option>儿童</option>
					</select>
				</div>

				<div class="ml">
					<span class="qr">*</span>
					<span>邮箱：</span>
					<input type="text" class="wh" id="eml" placeholder="请正确填写邮箱地址">
					<span></span>
				</div>

				<div class="err">
					<span class="jlt"></span>
					<span>您输入的邮箱格式有误</span>
				</div>

				<div>
					<span class="qr">*</span>
					<span>手机号码：</span>
					<input type="text" class="wh" id="tel" placeholder="请填写您的手机号码">
					<span class="ts">请正确填写手机号码，稍后将向该手机号码发送短信验证码</span>
				</div>

				<div class="err">
					<span class="jlt"></span>
					<span>您的手机号码不正确</span>
				</div>

				<div class="rad">
					<label><input type="checkbox" name="" id="">
						我已阅读并遵守</label>
					<a href="#">《中国铁路客户服务中心网站服务条款》</a>
					<a href="#">《隐私权政策》</a>
				</div>

				<button class="but">下一步</button>
			</form>
		</div>

	</body>
</html>






